import React, { Component } from "react";
import { flushSync } from "react-dom";

class DemoTest extends Component {
    state = {
        x: 1,
    };
    handle = () => {
        for (let i = 0; i < 20; i++) {
            // 渲染1次值为2
            // this.setState({
            //     x: this.state.x + 1
            // })

            // 渲染1次值为21
            this.setState(prevState => {
                return {
                    x: prevState.x + 1
                }
            })

            // 渲染20次值为21
            // flushSync(() => {
            //     this.setState({
            //         x: this.state.x + 1
            //     })
            // })
        }
    };
    render() {
        console.log('视图渲染');
        let { x } = this.state;
        return (
            <>
                x:{x}
                <br />
                <button onClick={this.handle}>按钮</button>
            </>
        );
    };
};

export default DemoTest;